<template>
    <div class="max">
        <div class="left">
            <div class="list">
                <router-link to="/hello">hello</router-link>
            </div>
            //dsdsds
        </div>
        <div class="right">
            <div>{{time}}</div>
            <div class="top">
                <Data />
            </div>
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
import Data from '../components/data/dataIndex.vue'
export default {
    name: "HomeIndex",
    components: {
        Data
    },
    data() {
        return {
            time:'刚刚'
        };
    },
    created() {
    this.$bus.$on('timeDate',(aa=>{
            this.time=aa
    }))
    },
    methods: {},
};
</script>

<style scoped lang="scss">
.max{
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;

    .left{
        width: 300px;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        .list{
            padding: 5px 10px;
            color: lightblue;
            background: #f3f3f3;
        }
    }
    .right{
        flex: 1;
        justify-content: center;
        align-items: center;
        height: 100%;
        // background-color: lightcoral;
        .top{
            width: 427px;
            height: 34px;
            background-color: #f2f2f2;
            display: flex;
            align-items: center;
            overflow: hidden;
            margin-bottom: 10px;
        }
        
    }
}
</style>
<style>
.el-popover__reference-wrapper{
            height: 34px;
        }
</style>